import defaultImg from '../../../assets/images/200.png'

import { useIntersectionObserver } from '@vueuse/core'

// export default {
//   mounted(el) {
//     const imgSrc = el.src
//     el.src = ''
//     el.style.background = `no-repeat center/contain url(${defaultImg})`
//     const { stop } = useIntersectionObserver(
//       el,
//       ([{ isIntersecting }], observerElement) => {
//         if (isIntersecting) {
//           stop()
//           el.src = imgSrc
//           el.onload = () => {
//             el.style.background = ''
//           }
//         }
//       }
//     )
//   }
// }

export default {
  // 在绑定元素的父组件被挂载后调用
  mounted(el) {
    // 1. 拿到最终要展示的图片
    const imgSrc = el.src
    // 2. 把元素的 src 置空，使其不进行加载
    el.src = ''
    // 3. 设置占位图
    el.style.background = `no-repeat center/contain url(${defaultImg})`
    // 4. 当元素可见时
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }], observerElement) => {
        if (isIntersecting) {
          stop()
          // 5. 重新设置对应的 src
          el.src = imgSrc
          // 6. 图片加载完成后，清空背景图
          el.onload = () => {
            el.style.background = ''
          }
        }
      }
    )
  }
}
